import '@/assets/scss/xyf/login.scss'
import logo from '@/assets/images/xyf/logo.png'
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory } from "react-router-dom";
import { Input, Button, message } from 'antd';
import { userLogin } from '@/http/xyf/user.js'
import { UserOutlined, 
         LockOutlined, 
         CloseCircleOutlined, 
         ExclamationCircleOutlined } from '@ant-design/icons';
import { userLoginDispatch } from '@/store/actions/xyf/action-login/loginAction'
// import ParticlesBg from 'particles-bg'       

export default function Login() {
    const [ username, setUsername ] = useState('')
    const [ password, setPassword ] = useState('')
    //警告框
    const [warn, setWarn] = useState(false)
    //报错框
    const [err] = useState(false)
    //按钮的禁用
    const [disable, setDisable] = useState(false)
    //使用hook useHistory
    const history = useHistory()
    //使用hook useDispatch
    const dispatch = useDispatch()
    //登录处理
    const loginHandle = () => {
        // 如果用户名或者密码为空，弹出警告框
        message.destroy();
        if(!username || !password) {
            setWarn(true)
        }
        else {
            let data = {
                username,
                password
            }
            setDisable(true)   //禁用按钮
            userLogin(data).then(res => {
               if(res.status === 200) {
                setDisable(false)   //释放按钮
                if(res.data.status === '200') {
                    //dispatch修改reducers
                    dispatch(userLoginDispatch(data))
                    history.replace('/home')
                }
                else if(res.data.status === '404') {
                    message.warning('登录失败，请稍后重试！');
                }
                else {
                    message.error('账号或者密码错误，请重新输入。');
                }
               }
            })
        }
    }

    return (
        <div className="login-box">
           <div className="container">
               <div className="top">
                    <img src={logo} alt="" className="logoImg"/>
                    <span className="title1">互联网金融后台管理系统</span>
               </div>
               <div className="group">
                   <div className="group-item">
                       <Input placeholder="请输入用户名" 
                       size="large" 
                       onChange={(e) => setUsername(e.target.value)}
                       onFocus={() => setWarn(false)}
                       value={username}
                       prefix={<UserOutlined className="iconColor" />} className="bgColor" />
                   </div>
                   <div className="group-item">
                       <Input placeholder="请输入密码" 
                       type="password"
                       size="large" 
                       value={password}
                       onFocus={() => setWarn(false)}
                       onChange={(e) => setPassword(e.target.value)}
                       prefix={<LockOutlined 
                       className="iconColor" />} />
                   </div>
                   <div className="group-item">
                   <Button type="primary" block size="large" 
                                          disabled={disable}
                                          onClick={loginHandle}>登 录</Button>
                   </div>
                   <div className="note">
                       {/* 错误提示 */}
                       <div className={["red ", err ? '' : 'isNone'].join('')}>
                            <CloseCircleOutlined />
                            <span className="ge">您的用户名或者密码错误，请再次输入</span>
                       </div>
                       {/* 警告提示 */}
                       <div className={["orange ", warn ? '' : 'isNone'].join('')}>
                            <ExclamationCircleOutlined />
                            <span className="ge">您的格式有问题，请检查下</span>
                       </div>
                   </div>
               </div>             
           </div>
        </div>
    )
}
